<template>
  <div class="dataScreen-container">
    <div class="dataScreen-content" ref="screen">
      <div class="dataScreen-header">
        <div class="header-lf">
          <span class="header-screening" @click="goHome">首页</span>
        </div>
        <div class="header-ct">
          <div class="header-ct-title">
            <span>智慧旅游可视化大数据展示平台</span>
            <div class="header-ct-warning">平台高峰预警信息（2条）</div>
          </div>
        </div>
        <div class="header-ri">
          <span class="header-download">统计报告</span>
          <span class="header-time">当前时间：{{ time }}</span>
        </div>
      </div>
      <div class="dataScreen-main">
        <div class="dataScreen-lf">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <span>实时游客统计</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <div class="dataScreen-main-chart">
              <Tourist></Tourist>
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title">
              <span>男女比例</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <div class="dataScreen-main-chart">
              <Sex></Sex>
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title">
              <span>年龄比例</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <div class="dataScreen-main-chart">
              <Age></Age>
            </div>
          </div>
        </div>
        <div class="dataScreen-ct">
          <div class="dataScreen-map">
            <div class="dataScreen-map-title">景区实时客流量</div>
            <Map></Map>
          </div>
          <div class="dataScreen-cb">
            <div class="dataScreen-main-title">
              <span>未来30天游客量趋势图</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <div class="dataScreen-main-chart">
              <Line></Line>
            </div>
          </div>
        </div>
        <div class="dataScreen-rg">
          <div class="dataScreen-top">
            <div class="dataScreen-main-title">
              <span>热门景区排行</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <div class="dataScreen-main-chart">
              <Rank></Rank>
            </div>
          </div>
          <div class="dataScreen-center">
            <div class="dataScreen-main-title">
              <span>年度游客量对比</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <div class="dataScreen-main-chart">
              <!-- <AnnualUseChart /> -->
              <Year></Year>
            </div>
          </div>
          <div class="dataScreen-bottom">
            <div class="dataScreen-main-title">
              <span>预约渠道数据统计</span>
              <img src="./images/dataScreen-title.png" alt="" />
            </div>
            <div class="dataScreen-main-chart">
              <!-- <AnnualUseChart /> -->
              <Counter></Counter>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
// 引入顶部组件
import Tourist from './components/tourist/index.vue'
import Age from './components/age/index.vue'
import Sex from './components/sex/index.vue'
import Map from './components/map/index.vue'
import Line from './components/line/index.vue'
import Rank from './components/rank/index.vue'
import Year from './components/year/index.vue'
import Counter from './components/couter/index.vue'
//存储当前时间
let time = ref(moment().format('YYYY年MM月DD日 hh:mm:ss'))
const $router = useRouter()
let timer = ref(0)
//获取数据大屏展示内容盒子的DOM元素
let screen = ref()
onMounted(() => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`

  timer.value = setInterval(() => {
    time.value = moment().format('YYYY年MM月DD日 hh:mm:ss')
  }, 1000)
})
//定义大屏缩放比例
function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww < wh ? ww : wh
}
// 点击首页回到首页
const goHome = () => {
  $router.push('/home')
}
//监听视口变化
window.onresize = () => {
  screen.value.style.transform = `scale(${getScale()}) translate(-50%,-50%)`
}
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
</script>
<style lang="scss" scoped>
.dataScreen-container {
  width: 100%;
  height: 100%;
  // background-color: red;
  background: url('./images/bg.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  .dataScreen-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform-origin: left top;
    width: 1920px;
    height: 1080px;
    // background-color: red;
    .dataScreen-header {
      width: 100%;
      height: 38px;
      // background-color: skyblue;
      display: flex;
      .header-lf,
      .header-ri {
        position: relative;
        width: 564px;
        height: 100%;
        background: url('./images/dataScreen-header-left-bg.png') no-repeat;
        background-size: 100% 100%;
      }
      .header-ct {
        position: relative;
        flex: 1;
        height: 100%;
        // background-color: skyblue;
        .header-ct-title {
          text-align: center;
          color: #05e8fe;
          font-family: YouSheBiaoTiHei;
          font-size: 32px;
          width: 100%;
          height: 74px;
          line-height: 74px;
          letter-spacing: 4px;
          background: url('./images/dataScreen-header-center-bg.png') no-repeat;
          background-size: 100% 100%;
          .header-ct-warning {
            position: absolute;
            left: 50%;
            width: 622px;
            height: 44px;
            font-size: 14px;
            line-height: 34px;
            color: #ffffff;
            text-align: center;
            letter-spacing: 1px;
            background: url('./images/dataScreen-header-warn-bg.png') no-repeat;
            transform: translateX(-50%);
          }
        }
      }
      .header-screening,
      .header-download {
        position: absolute;
        z-index: 9;
        box-sizing: border-box;
        width: 136px;
        height: 42px;
        font-family: YouSheBiaoTiHei;
        font-size: 18px;
        font-weight: 400;
        line-height: 42px;
        color: #29fcff;
        text-align: center;
        cursor: pointer;
        background-size: 100% 100%;
      }
      .header-screening {
        right: 0;
        //  padding-right: 4px;
        background: url('./images/dataScreen-header-btn-bg-l.png');
      }
      .header-download {
        left: 0;
        background: url('./images/dataScreen-header-btn-bg-r.png');
      }
      .header-time {
        position: absolute;
        right: 40px;
        // width: 310px;
        font-family: YouSheBiaoTiHei;
        font-size: 17px;
        font-weight: 400;
        line-height: 38px;
        color: #05e8fe;
      }
    }
    .dataScreen-main {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      // background-color: yellow;
      display: flex;
      padding: 12px 42px 57px;
      .dataScreen-lf {
        width: 394px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-right: 40px;
        .dataScreen-top,
        .dataScreen-center,
        .dataScreen-bottom {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          padding-top: 54px;
        }
        .dataScreen-top {
          height: 37%;
          background: url('./images/dataScreen-main-lt.png') no-repeat;
          background-size: 100% 100%;
        }
        .dataScreen-center {
          height: 30%;
          background: url('./images/dataScreen-main-lc.png') no-repeat;
          background-size: 100% 100%;
        }
        .dataScreen-bottom {
          height: 27%;
          margin-bottom: 0;
          background: url('./images/dataScreen-main-lb.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .dataScreen-rg {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 394px;
        height: 100%;
        .dataScreen-top,
        .dataScreen-center,
        .dataScreen-bottom {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          padding-top: 54px;
        }
        .dataScreen-top {
          height: 37%;
          background: url('./images/dataScreen-main-rt.png') no-repeat;
          background-size: 100% 100%;
        }
        .dataScreen-center {
          height: 30%;
          background: url('./images/dataScreen-main-rc.png') no-repeat;
          background-size: 100% 100%;
        }
        .dataScreen-bottom {
          height: 27%;
          margin-bottom: 0;
          background: url('./images/dataScreen-main-rb.png') no-repeat;
          background-size: 100% 100%;
        }
      }
      .dataScreen-ct {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        height: 100%;
        margin-right: 40px;
        .dataScreen-map {
          position: relative;
          flex: 1;
          width: 100%;
          box-sizing: border-box;
          padding-top: 78px;
          .dataScreen-map-title {
            // position: absolute;
            // top: 10px;
            // left: 0;
            display: flex;
            align-items: center;
            padding-left: 30px;
            width: 270px;
            height: 25px;
            font-size: 14px;
            color: #ffffff;
            letter-spacing: 5px;
            background: url('./images/map-title-bg.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .dataScreen-cb {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          height: 252px;
          background: url('./images/dataScreen-main-cb.png') no-repeat;
          background-size: 100% 100%;
          padding-top: 54px;
        }
      }
    }
    .dataScreen-main-title {
      position: absolute;
      top: 1px;
      left: 0;
      display: flex;
      flex-direction: column;
      span {
        color: #ffffff;
        font-size: 18px;
        margin-bottom: 15px;
        line-height: 16px;
      }
      img {
        width: 68px;
        height: 7px;
      }
    }
    .dataScreen-main-chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
